<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>定义一个vue实例</title>
    <!--定义一个vue实例常用的4个选项：过滤器filters、计算属性computed、方法methods、观察watch。-->
    <script src="../js/lib/vue.min.js"></script>
</head>
<body>
<div id="app">
    <!--通过管道符 | 把函数toInt 放在变量后面即可，
    num1，num2，num3会分别作为参数value传入toInt( value )方法进行运算，
    并返回一个整数。-->
    数字1：{{ num1 | toInt }}<br>
    数字2：{{ num2 | toInt }}<br>
    数字3：{{ num3 | toInt }}<br>
    总和：{{ sum | toInt }}<br>
    <button v-on:click="plus">加1</button>
</div>
<script>
    // 创建vm实例
    let vm = new Vue({
        //2、挂载元素
        el:"#app",
        //3、实例vm的数据
        data:{
            num1:33.141,
            num2:46.212,
            num3:78.541
        },
        // filters  过滤器
        filters:{
            toInt(value){
                return parseInt(value);
            }
        },
        // computed  计算属性
        computed:{
            sum(){
                return this.num1+this.num2+this.num3;
            }
        },
        // methods 方法，绑定事件
        methods:{
            plus(){
                return this.num1++;
            }
        },
        // watch 监听数据发生改变
        watch:{
            num1(){
                console.log('num1 有了变化，最新值');
                console.log(this.num1);
            }
        }
    });
</script>
</body>
</html>